<!--  -->
<template>
<div class='gameDetails-page'>
  <c-title text="参赛信息" :hide="false" ></c-title>
  <div class="game-details">
    <h3 class="game-title">{{gameInfo.goods && gameInfo.goods.title}}</h3>
    <div class="game-list">
      <div class="game-item flex">
        <div class="game-name">报名时间</div>
        <div class="game-content">{{gameInfo.created_at}}</div>
      </div>
      <div class="game-item flex">
        <div class="game-name">参赛学员</div>
        <div class="game-content">{{gameInfo.relation_name}}</div>
      </div>
      <div class="game-item flex">
        <div class="game-name">手机号</div>
        <div class="game-content">{{gameInfo.mobile}}</div>
      </div>
      <div class="game-item flex">
        <div class="game-name">作品名称</div>
        <div class="game-content">{{gameInfo.work_name}}</div>
      </div>
      <div class="game-item flex">
        <div class="game-name">指导老师</div>
        <div class="game-content">{{gameInfo.teacher_name}}</div>
      </div>
      <div class="game-item flex">
        <div class="game-name">老师手机号</div>
        <div class="game-content">{{gameInfo.teacher_mobile}}</div>
      </div>
      <div class="game-item flex">
        <div class="game-name">指导单位</div>
        <div class="game-content">{{gameInfo.unit}}</div>
      </div>
      <div class="game-item flex">
        <div class="game-name">参赛组别</div>
        <div class="game-content">{{gameInfo.group_name}}</div>
      </div>
      <div class="game-item flex">
        <div class="game-name">作品上传</div>
        <div class="game-content">
          <img :src="gameInfo.work_url" v-if="fileExtension== 'png' || fileExtension== 'jpeg' || fileExtension== 'jpg' || fileExtension== 'gif'"/>
          <video 
            width="105" 
            height="105" 
            :src="gameInfo.work_url" 
            :controls="false"
            ref="video"
            @click="playVideoInFullscreen"
            @ended="onVideoEnded"
            poster 
            v-if="fileExtension== 'mp4' || fileExtension== 'm3u8' || fileExtension== 'avi' || fileExtension== 'webm' || fileExtension== 'ogg'">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.m3u8" type="video/m3u8">
            <source src="movie.webm" type="video/webm">
            <source src="movie.avi" type="video/avi">
            <source src="movie.ogg" type="video/ogg">
            您的浏览器不支持Video标签。
          </video>
          <p>上传图片或视频</p>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import gameDetails_controller from './gameDetails_controller';
export default gameDetails_controller;

</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .gameDetails-page {
    margin:0.625rem 0.75rem 0 0.75rem;
    .game-details {
      background-color: #fff;
      padding:0.6875rem;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      .game-title {
        font-weight: 500;
        font-size: 1rem;
        color: #00001C;
        position: relative;
        text-align: left;
        padding:0 0 0 0.4375rem;
        &::after {
          position: absolute;
          content: "";
          width: 0.1875rem;
          height: 0.9375rem;
          left:0;
          top:50%;
          transform: translate(0%, -50%);
          background: var(--themeBaseColor);
          border-radius: 0.125rem 0.125rem 0.125rem 0.125rem;
        }
      }
      .game-list {
        padding:1.8125rem 0 0 0;
        .game-item {
          font-weight: 500;
          font-size: 0.875rem;
          color: #00001C;
          padding:0 0 1.5625rem 0;
          .game-name {
            width:27%;
            text-align: left;
          }
          .game-content {
            text-align: left;
            img {
              width: 4.625rem;
              height: 4.625rem;
              background: #F8F8F8;
              border-radius: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
              display: block;
            }
            p {
              font-size: 0.75rem;
              color: #AAAAB3;
              padding:0.8125rem 0 0 0;
            }
          }
        }
      }
    }
  }
</style>